<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_索引模式画四边形</title>
</head>

<body>
    <canvas id="canvas"></canvas>
    <!-- <script src="./dist/main.js"></script> -->
</body>

<!-- <script id="vertexShader" type="notjs" src="webglLearn/vert.glsl"></script>
<script id="fragmentShader" type="notjs" src="webglLearn/flag.glsl"></script> -->

<script>
    let vertexShaderSource =
        "precision mediump float;\n" +
        "attribute vec4 a_Position;\n" +
        "varying vec4 v_Position;\n" +
        "void main() {\n" +
        "  gl_Position = a_Position;\n" +
        "  v_Position = a_Position;\n" +
        "}\n";
    let fragmentShaderSource =
        `
    precision mediump float;
    varying vec4 v_Position;
    uniform float time;
    vec4 HSV2RGBA(float h,float s,float v) {
        float r, g, b;
        if (s == 0.0) {
            r = g = b = v;
        }
        else {
            if (v == 0.0) {
                r = g = b = 0.0;
            }
            else {
                if (h == 1.0) h = 0.0;
                h *= 6.0;
                s = s;
                v = v;
                float i = floor(h);
                float f = h - i;
                float p = v * (1.0 - s);
                float q = v * (1.0 - (s * f));
                float t = v * (1.0 - (s * (1.0 - f)));
                if(i == 0.0){
                    r = v;
                    g = t;
                    b = p;
                }
                else if(i == 1.0){
                    r = q;
                    g = v;
                    b = p;
                }
                else if(i == 2.0){
                    r = p;
                    g = v;
                    b = t;
                }
                else if(i == 3.0){
                    r = p;
                    g = q;
                    b = v;
                }
                else if(i == 4.0){
                    r = t;
                    g = p;
                    b = v;
                }
                else if(i == 5.0){
                    r = v;
                    g = p;
                    b = q;
                }

            }
        }
        // r *= 255.0;
        // g *= 255.0;
        // b *= 255.0;
        return vec4(r,g,b,1.0);
    }

    float PI = 3.1415926;
    void main() {
        float angle = atan(v_Position.x,v_Position.y) / PI * 180.0 + 180.0 ;
        angle += time * 100.0;
        float h = (angle ) / 360.0;
        if(h > 1.0){
            h = h - 1.0;
        }else if(h < 0.0){
            h = h + 1.0;
        }
        vec4 color = HSV2RGBA(fract(h), 1.0 , 1.0);
        gl_FragColor = color;
    }

    `


    lastTimeStamp = getTime();
    deltaTime = 0;
    totalTime = 0;
    frameRate = 60;
    console.log('vertexShaderSource', vertexShaderSource)
    let dist = 0.5
    // let distR = 
    function getPointByAngle(angle, dist) {
        let rad = angle * Math.PI / 180;

        return [Math.sin(rad) * dist, Math.cos(rad) * dist]
    }
    let vertices = new Float32Array([
        -dist, dist,
        dist, dist,
        dist, -dist,
        -dist, -dist,
    ])
    let indices = [0, 1, 2, 0, 2, 3];


    function setClearColor(r, g, b, a) {
        // 指定清空<canvas>的颜色
        gl.clearColor(r / 255, g / 255, b / 255, a / 255);
    }

    function createShader(gl, sourceCode, type) {
        // Compiles either a shader of type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER
        let shader = gl.createShader(type);
        gl.shaderSource(shader, sourceCode);
        gl.compileShader(shader);
        // console.log(gl.getShaderParameter(shader, gl.COMPILE_STATUS))
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            let info = gl.getShaderInfoLog(shader);
            throw "Could not compile WebGL program. \n\n" + info;
        }
        return shader;
    }

    function initShader(gl) {
        let vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER)
        let fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER)
        gl.attachShader(gl.program, vertexShader)
        gl.attachShader(gl.program, fragmentShader)
        gl.linkProgram(gl.program);
        if (!gl.getProgramParameter(gl.program, gl.LINK_STATUS)) {
            let info = gl.getProgramInfoLog(gl.program);
            throw "Could not link WebGL program. \n\n" + info;
        }
        gl.useProgram(gl.program)
    }

    let vertexBuffer;
    let indicesBuffer;
    function initBuffer(gl) {
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
    }



    function drawTrangle(gl) {

        // 清空<canvas>
        setClearColor(69, 69, 69);
        gl.clear(gl.COLOR_BUFFER_BIT);
        // 绘制三角形
        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
        // gl.drawArrays(gl.TRIANGLES, 0, 3)
    }

    function rand(min, max) {
        if (max === undefined) {
            max = min;
            min = 0;
        }
        return Math.random() * (max - min) + min;
    }

    function init() {
        let canvas = document.querySelector("#canvas");
        if (!canvas) {
            console.error('没有canvas');
        }
        console.log('canvas', canvas)
        canvas.setAttribute('width', "600px");
        canvas.setAttribute('height', "600px");
        let gl = canvas.getContext('webgl');
        window.gl = gl;
        if (!gl) {
            console.error('没有gl')
        }
        console.log('gl', gl)
        gl.enable(gl.SCISSOR_TEST);
        // gl.enable(gl.DEPTH_TEST);
        gl.program = gl.createProgram()
        vertexBuffer = gl.createBuffer()
        indicesBuffer = gl.createBuffer()
        // gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        let program = initShader(gl)
        // 初始化buffer
        initBuffer(gl);
    }

    function update() {
        drawTrangle(gl)
    }

    init()
    function getTime() {
        return new Date().getTime() / 1000;
    }
    setInterval(() => {
        let cutTime = getTime()
        deltaTime = cutTime - lastTimeStamp;
        lastTimeStamp = cutTime

        totalTime += deltaTime;
        let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
        // console.log('a_Position', a_Position)
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);
        let time_location = gl.getUniformLocation(gl.program, 'time');
        gl.uniform1f(time_location, totalTime)
        update(deltaTime)

    }, 1000 / frameRate)


</script>

</html>